<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Select2实现全国省市区三级联动下拉菜单</title>
  <script src="js/jquery.js"></script>
  <script src="js/select2.js"></script>
  <script type="text/javascript" src="js/location.js"></script>
  <link href="css/select2.css" rel="stylesheet" />
</head>

<body>
  <div class="main">
    <center>
      <select id="loc_province" style="width:120px;">
      </select>
      <select id="loc_city" style="width:120px; margin-left: 10px">
      </select>
      <select id="loc_town" style="width:120px;margin-left: 10px">
      </select>
      <br>
      <br>
      <br>
      <br>
      <input type="button" id="btnval" value="获取值" style="padding:5px 15px;" />
      <input type="button" id="btntext" value="获取文本" style="padding:5px 15px;" />
    </center>
  </div>
</body>
<script>
  $(function () {
    var loc = initLocation($("#loc_province"), $("#loc_city"), $("#loc_town"));
    loc.location('2822', '2872', '2876');

    $('#btnval').click(function () {
      alert($('#loc_province').val() + ' - ' + $('#loc_city').val() + ' - ' + $('#loc_town').val())
    })
    $('#btntext').click(function () {
      alert($('#loc_province').select2('data').text + ' - ' + $('#loc_city').select2('data').text + ' - ' + $('#loc_town').select2('data').text)
    })
  })
</script>

</html>
